<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>MemeGenerator</title>
        <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
    </head>
    <body>
        <iframe id="preview" name="preview" src="testing.jpg?nocache" width="1200" height="400" frameborder="0" ALLOWTRANSPARENCY="true"></iframe>

        <form id="form" action="testing.jpg" method="GET" target="preview">
            <input type="hidden" name="nocache" />

            <label>Upper Text <input type="text" name="uppertext" value="" /></label><br />
            <label>Upper Text Size <input type="text" name="uppertextsize" value="16" /></label><br />
            <label>Upper Text Color <input type="text" name="uppertextcolor" value="255,255,255" /></label><br />
            <label>Upper Text Font <input type="text" name="uppertextfont" value="OpenSans-Bold.ttf" /></label><br />
            <label>Upper Text Align <input type="text" name="uppertextalign" value="center" /></label><br />
            <br />

            <label>Center Text <input type="text" name="text" value="" /></label><br />
            <label>Center Text Size <input type="text" name="textsize" value="16" /></label><br />
            <label>Center Text Color <input type="text" name="textcolor" value="255,255,255" /></label><br />
            <label>Center Text Font <input type="text" name="textfont" value="OpenSans-Bold.ttf" /></label><br />
            <label>Center Text Align <input type="text" name="textalign" value="center" /></label><br />
            <br />

            <label>Lower Text <input type="text" name="lowertext" value="" /></label><br />
            <label>Lower Text Size <input type="text" name="lowertextsize" value="16" /></label><br />
            <label>Lower Text Color <input type="text" name="lowertextcolor" value="255,255,255" /></label><br />
            <label>Lower Text Font <input type="text" name="lowertextfont" value="OpenSans-Bold.ttf" /></label><br />
            <label>Lower Text Align <input type="text" name="lowertextalign" value="center" /></label><br />
            <br />

            <input type="submit" value="Generate" />
        </form>

    </body>
    <script>
        var formTimeout = null;
        $('#form input').on('keyup', function(){
            clearTimeout(formTimeout);
            formTimeout = setTimeout(function(){
                $('#form').submit();
            }, 300);
        });
    </script>
</html>
